window.onload = function () {
    // 登录注册的地方应该显示昵称
    // 获取昵称
    // 获取本地存储中的数据
    // localStorage.getItem(键)
    window.id = localStorage.getItem('id')
    // console.log(id);
    window.token = localStorage.getItem('token')

    sendAjax({
        url: 'http://localhost:8888/users/info',
        data: {
            id: id
        },
        headers: {
            authorization: token
        },
        success: res => {
            res = JSON.parse(res)
            console.log(res);
            if (res.code === 1) {
                var { info: { username } } = res;
                // console.log(nickname);
                // 自定义拼接一个需要显示的内容
                var str = `
                欢迎您，<a href="#" class="user">${username}</a>
                <a href="javascript:;" class="logout" onclick="logouts()">退出</a>
                `
                document.querySelector('.userinfo').innerHTML = str
            }
        }
    })

}
// 定义退出函数
function logouts() {
    // 询问是否要退出
    layer.confirm('你确定要残忍离开吗？', {
        btn: ['当然', '再想想'] //按钮
    }, function () {
        // 点击了第一个按钮后要执行的代码
        // 退出操作
        sendAjax({
            url: 'http://localhost:8888/users/logout/' + id,
            success: res => {
                res = JSON.parse(res)
                var { message, code } = res
                if (code === 1) {
                    layer.alert(message, {
                        icon: 1,
                        time: 1500
                    }, function () {
                        // 注销成功跳转到首页
                        location.href = "03.home.html"


                        // 删除本地存储
                        localStorage.removeItem('id')
                        localStorage.removeItem('token')
                    })
                }
                // console.log(res);
            }
        })
    }/*, function(){
        // 点击了第二个按钮后要执行的代码

    }*/);
}

// 判断是否登录
// 本地存储中获取用户id和token
var userid = localStorage.getItem('id')
var token = localStorage.getItem('token')
// 如果没有获取到就表示没有登录
if (!userid) {
    // 提示没有登录
    layer.msg('请先登录', {
        icon: 2,
        timen: 1500
    }, () => {
        // 跳转到登录页
        // 存储当前地址
        localStorage.setItem('url', location.href)
        // 跳转
        location.href = "02.login.html"
    })
}
// 获取到id了，拿id获取当前用户的信息
promiseAjax({
    url: 'http://localhost:8888/users/info/' + userid,
    headers: {
        authorization: token
    }
}).then(res => {
    res = JSON.parse(res)
    if (res.code === 1) {
        // 当前购物车数据
        // 获取本地存储的中的数据
        var data = localStorage.getItem('data')
        // 判断本地存储中是否有数据
        if(!data){
            var str = `
                <div class="jumbotron">
                    <h1>购物车空空如也！</h1>
                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                    <p><a class="btn btn-primary btn-lg" href="04.list.html" role="button">去列表页</a></p>
                </div>
            `
            // 把str放在页面中
            document.querySelector('.container').innerHTML = str;
            return
        }
        // console.log(data);
        // 转换数组
        data = JSON.parse(data)
        // 从中筛选到当前用户的数据 - filter()方法
        data = data.filter(item => item.user == userid)
        // 判断本地存储中是否有当前用户的数据
        if (!data.length === 0) {
            // 显示空空如也
            var str = `
                <div class="jumbotron">
                    <h1>购物车空空如也！</h1>
                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                    <p><a class="btn btn-primary btn-lg" href="04.list.html" role="button">去列表页</a></p>
                </div>
            `
            // 把str放在页面中
            document.querySelector('.container').innerHTML = str;
            return
        }
        // 发送请求获取到data中的商品数据
        // 将所有数据获取回来
        $.ajax({
            url: 'https://list.mogu.com/search',
            // 如果是jsonp请求，一定要传dataType，值必须是jsonp
            dataType: 'jsonp',
            data: {
                // callback: 'jQuery211011968344062945513_1634803109232',
                _version: 8193,
                ratio: ' 3:4',
                cKey: 15,
                page: 1,
                sort: 'pop',
                ad: 0,
                fcid: 50273,
                action: 'clothing',
                acm: '3.mce.1_10_1pq6a.132494.0.7OS5bsMsvVFCn.pos_871-m_600133-sd_119',
                ptp: '31.v5mL0b.0.0.QeU0Pbw2',
                _: new Date()
            },
            success: res => {
                //    console.log(res);
                // 获取数据转换成数组
                var arr = res.result.wall.docs
                console.log(arr);
                // 从arr中找到data中的数据
                var list = []
                arr.forEach(item => {
                    //遍历data - data中的每一个goodid是否和item中的goodsid相等
                    data.forEach(v => {
                        //判断他们的goosid是否相等
                        if (v.goodsid == item.cfav) {
                            list.push(item)
                        }
                    })
                })
                console.log(list);
                // 渲染list中的数据
                //将list中的数据渲染到table中
                var str = ``
                list.forEach(item => {
                    var number = data.find(v => v.goodsid == item.cfav).number
                    str += `
                        <tr>
                            <td><input type="checkbox" name="selectOne"></td>
                            <td><img src="${item.img}" width=100 height=100></td>
                            <td>${item.title}</td>
                            <td>${item.price}</td>
                            <td data-id="${item.cfav}">
                                <input type="button" name="reduce" value="-">
                                <input type="number" name="name" value="${number}">
                                <input type="button" name="add" value="+"> 
                            </td>
                            <td>${(item.price * number).toFixed(2)}</td>
                            <td class="remove">删除</td>
                        </tr>
                    `
                })
                document.querySelector('.cart tbody').innerHTML = str
                

                // 设置单选全选
                selectAll()
                // 数量加减
                addReduce()

                // 计算总数量和总价格
                count()

                // 删除购物车功能
                remove()
                // 清空购物车
                clear()
            }
        })


    } else {
        // 提示没有登录
        localStorage.setItem('url', location.href)
        // 跳转
        location.href = "02.login.html"
    }

})


// 全选单选的功能
function selectAll(){
    // 点两个全选，所有的都应该选中
    var selectAll = document.querySelectorAll('[name="selectAll"]')
    var selectOne = document.querySelectorAll('[name="selectOne"]')
    for(var i=0;i<selectAll.length;i++){
        selectAll[i].onclick = function(){
            // 其他所有的单选根据当前点击的设置全部选中
            // 遍历selectOne都设置
            for(var j=0;j<selectOne.length;j++){
                selectOne[j].checked = this.checked
            }
            for(var j=0;j<selectAll.length;j++){
                selectAll[j].checked = this.checked
            }
            count()
        }
    }
    // 将selectOne转成数组 - every
    var arr = [].slice.call(selectOne)
    arr.forEach(item=>{
        item.onclick = function(){
            // 判断是否全部都选中
            var bool = arr.every(v=>v.checked)
            // 根据获取到的bool设置两个全选
            for(var j=0;j<selectAll.length;j++){
                selectAll[j].checked = bool
            }

            count()
        }
    })
}

// 数量加减的功能
function addReduce(){
    // 获取所有的减按钮
    var reduceBths = document.querySelectorAll('[name="reduce"]')
    // 循环遍历绑定事件
    for(var i=0;i<reduceBths.length;i++){
        reduceBths[i].onclick = function(){
            // 获取数量
            var number = this.nextElementSibling.value
            // 数量减
            number = number - 1
            // 限制最小值
            if(number<=1){
                number = 1
            }
            // 放到数量框中
            this.nextElementSibling.value = number
            // 还需要改变本地存储中的number
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            var obj = data.find(item=>item.goodsid == this.parentElement.getAttribute('data-id') && item.user == userid)
       
            obj.number = number
            localStorage.setItem('data',JSON.stringify(data))

            // 修改小计
            this.parentElement.nextElementSibling.innerText = (number * this.parentElement.previousElementSibling.innerText).toFixed(2)
            
            count()
        }
    }

    // 获取所有加按钮
    var addBtns = document.querySelectorAll('[name="add"]')
    // 循环遍历绑定事件
    for(var i=0;i<addBtns.length;i++){
        addBtns[i].onclick = function(){
            // 获取数量
            var number = this.previousElementSibling.value;
            // 数量减
            number = number-0 + 1
            // // 限制最小值
            // if(number>=this.getAttribute('data-number')){
            //     number = this.getAttribute('data-number')
            // }
            // 放到数量框中
            this.previousElementSibling.value = number
            // 还需要改变本地存储中的number
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            var obj = data.find(item=>item.goodsid == this.parentElement.getAttribute('data-id') && item.user == userid)
            
            obj.number = number
            localStorage.setItem('data', JSON.stringify(data))

            // 修改小计
            this.parentElement.nextElementSibling.innerText = (number * this.parentElement.previousElementSibling.innerText).toFixed(2)

            count()
        
        }
    }
}


// 计算总价和总数量功能
function count(){
    //  计算总数量 - 被选中的复选框对应的数量累加
    var selectOne = document.querySelectorAll('[name="selectOne"]')
    // 遍历判断每个是够都选中
    var totalNum = 0
    var totalPrice = 0
    for(var i=0;i<selectOne.length;i++){
        if(selectOne[i].checked){
           // 将这个对应的数量获取到
            totalNum += selectOne[i].parentElement.parentElement.children[4].children[1].value-0
            totalPrice += selectOne[i].parentElement.parentElement.children[5].innerText-0
        }
    }
    // 将总数量和总价格放到页面中
    document.querySelector('.totalNum').innerText = totalNum 
    document.querySelector('.totalPrice').innerText = totalPrice;
}


// 清空购物车
function clear(){
    document.querySelector('.clear').onclick = function(){
        layer.confirm('你确定要全部删除吗？',{
            btn: ["确定", "取消"]
        },()=>{
            var str = `
                <div class="jumbotron">
                    <h1>购物车空空如也！</h1>
                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                    <p><a class="btn btn-primary btn-lg" href="04.list.html" role="button">去列表页</a></p>
                </div>
            `
            // 把str放在页面中
            document.querySelector('.container').innerHTML = str;
            // 从本地存储中将属于 当前用户的所有数据删除
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            // 筛选出不属于当前用户的所有数据
            var arr = data.filter(item=>item.user != userid)
            // 重新存入本地存储
            localStorage.setItem('data', JSON.stringify(arr))
            layer.msg('清空成功',{
                icon:1,
                time:1500
            })
        })
    }
}
// 删除购物车功能
function remove(){
    // 获取所有的删除标签
    var removes = document.querySelectorAll('.remove');
    // 遍历绑定单击事件
    for(var i=0;i<removes.length;i++){
        removes[i].onclick = function(){
            layer.confirm("你确定要删除吗？",{
                btn: ["确定", "取消"]
            },()=>{
                // 将这个tr从tbody中删除
                this.parentElement.parentElement.removeChild(this.parentElement)
                // 删除本地存储中的数据
                // 获取本地存储数据
                var data = localStorage.getItem('data')
                data = JSON.parse(data)
                // 从中筛选到当前这条数据的下标
                var index = data.findIndex(item=>item.user==userid && item.goodsid == this.previousElementSibling.previousElementSibling.getAttribute('data-id'))
                // 根据下标删除数组中的一个对象
                data.splice(index, 1)
                // 筛选是否还有当前用户的数据
                var arr = data.filter(item=>item.user==userid)
                // 如果没有了
                if(arr.length == 0){
                    // 空空如也
                    var str = `
                        <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="04.list.html" role="button">去列表页</a></p>
                        </div>
                    `
                    // 把str放在页面中
                    document.querySelector('.container').innerHTML = str;
                }
                // 删除以后的数组重新存入本地存储
                localStorage.setItem('data', JSON.stringify(data))
                count()
                layer.msg('删除成功',{
                    icon:1,
                    time:1500
                })
            })
            
        }
    }
}